<template>
  <div class="flex-c">
    <div class="flex-left">
      <div
        :class="{ active: current == item.name, log: true }"
        v-for="(item, index) in logs"
        :key="index"
        @click="toDetail(item.name)"
      >
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="flex-main">
      <pre v-loading="loading">{{ logText || "无日志" }}</pre>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "",
  props: {
    serviceName: String,
  },
  watch: {
    serviceName: {
      deep: true,
      immediate: true,
      handler(serviceName) {
        this.loadLogList(serviceName);
      },
    },
  },
  setup(props) {
    const state = reactive({ logText: "", logs: [], loading: false, current: "" });
    const loadLogList = (serviceName) => {
      $.get("/api/guardian/logList", { serviceName }).then((r) => {
        state.logs = r.data;
        state.logText = "";
        if (r.data.length) {
          toDetail(r.data[0].name);
        }
      });
    };
    const toDetail = (name) => {
      state.loading = true;
      state.current = name;
      $.get("api/Guardian/LogDetail", { serviceName: props.serviceName, name })
        .then((r) => {
          state.logText = r.data;
        })
        .finally(() => (state.loading = false));
    };
    return {
      ...toRefs(state),
      loadLogList,
      toDetail,
    };
  },
};
</script>
<style scoped>
.log {
  line-height: 1.8em;
}
.flex-left {
  width: 155px;
  border: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.flex-c {
  display: flex;
}
.flex-c pre {
  margin: 5px 0;
  font-size: 16px;
}
.flex-main {
  max-height: 80vh;
  overflow-y: scroll;
  overflow-x: auto;
  flex-grow: 1;
}
.log {
  padding: 5px 12px;
  box-shadow: inset 0px -1px 0px 0px rgb(227 233 237 / 50%);
}
.log:last-of-type {
  box-shadow: none;
}
.log:hover {
  background: #f5f7fa;
  color: #003e59;
}
.log.active {
  color: #409eff !important;
}
.log span {
  cursor: pointer;
}

</style>
